<template>
	<view class="content">
		<view class="padding">
			<view class="bg-white radius shadow padding text-center" style="width: 100%; height: 500rpx;"
				@click="previewImage(dataInfo.proImg)">
				<image style="width: 100%; height: 100%;" :src="dataInfo.proImg" mode="heightFix" />
			</view>
		</view>

		<view class="cu-bar bg-white solid-bottom">
			<view class="action text-bold">
				<text class="cuIcon-titles text-29a1b1"></text>
				<text>产品特点</text>
			</view>
		</view>

		<view class="bg-white padding" style="padding-top: 0; padding-bottom: 10rpx;">
			<view class="cptdItem flex align-center" v-for="(item,index) in dataInfo.proInfoList" :key="index">
				<text class="cuIcon-title text-29a1b1"></text>
				<view class="margin-left-xs">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 产品ID
				id: "",

				// 详情信息
				dataInfo: {},

			}
		},
		onLoad(option) {
			const vm = this;

			vm.id = option.id;

			// 获取产品详情
			vm.getProductInfo();
		},
		onShareAppMessage() {
			return {
				title: this.dataInfo.proName,
				path: this.share.path + '?id=' + this.options.id,
				imageUrl: this.share.imageUrl,
			}
		},
		methods: {
			// 获取产品详情
			getProductInfo() {
				const vm = this;
				var data = {
					"id": vm.id,
				}
				vm.$api.getProductInfo(data).then(res => {
					console.log(res)

					vm.dataInfo = res;

					uni.setNavigationBarTitle({
						title: vm.dataInfo.proName
					});
				})
			},

			// 点击图片放大预览
			previewImage(item) {
				uni.previewImage({
					urls: [item],
					current: item
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 0;
	}

	.cptdItem {
		padding: 10rpx 0 10rpx 0;

		.cptdItemIcon {
			width: 10rpx;
			height: 10rpx;
			border-radius: 22222rpx;
			background-color: #29a1b1;
		}
	}

	.cptdItem:not(:last-child) {
		// dashed
		border-bottom: 2px solid #29a1b1;
	}
</style>